<template>
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {OSM, ImageArcGISRest} from 'ol/source'
    import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer'

    export default {
        name: "ImageLayer",
        data() {
            return {
                map: null
            }
        },
        mounted() {
            let imageLayer = new ImageLayer({
                source: new ImageArcGISRest({
                    ratio: 1,
                    params: {},
                    url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer',
                }),
                opacity: 0.5,//透明度
                visible: true,//图层的可见性，不可见图层不再请求数据
                extent: [-18372064.265054375, 642477.8989716391, -3622231.734945626, 8495720.10102836],//图层渲染范围,该层将不会在此范围之外渲染。
                zIndex: 1,//图层渲染的级别，跟css样式的dom渲染级别是一样的，层级越大就显示在上一层
                properties: {
                    a: "aaa"
                }
            });
            this.map = new Map({
                target: "map",
                layers: [
                    new TileLayer({
                        source: new OSM(),
                        zIndex: 0//图层渲染级别
                    }),
                    imageLayer
                ],
                view: new View({
                    center: [-10997148, 4569099],
                    zoom: 4,
                })
            })
            //图层渲染之前触发
            imageLayer.on("prerender", this.preRenderEvent)
            //在图层渲染完成之后触发
            imageLayer.on("postrender", this.postRenderEvent)
        },
        methods: {
            preRenderEvent(evt) {
                console.log("图层渲染之前触发")
                console.log(evt)

            },
            postRenderEvent(evt) {
                console.log("图层渲染之后触发")
                console.log(evt)
            }
        }

    }
</script>

<style>
    #map {
        width: 100%;
        height: 100%;
    }

    .ol-viewport .ol-zoom-custom {
        top: .5em;
        right: .5em;
    }
</style>